import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import Link from 'umi/link';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import {
  Card,
  Form,
  List,
  Icon,
  Badge,
  Pagination,
} from 'antd';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import styles from './NoticeList.less';

/* eslint react/no-multi-comp:0 */
export default
@connect(({ post, loading }) => ({
  noticeData: post.noticeList,
  loading: loading.effects['post/fetchNotice'],
}))
@Form.create()
class NoticeList extends PureComponent {
  state = {
    isWide: true,
  };

  columns = [
    {
      title: '文章标题',
      dataIndex: 'post_title',
    },
    {
      title: '文章类型',
      dataIndex: 'post_type_str',
    },
    {
      title: '访问用户昵称',
      dataIndex: 'log_username'
    },
    {
      title: '访问时间',
      dataIndex: 'log_created',
      render: val => <span>{moment.unix(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '状态',
      dataIndex: 'notice_is_read',
      render: (val) => {
        const type = val == '1' ? 'success' : 'error';
        const text = val == '1' ? '已读' : '未读';
        return <Badge status={type} text={text} />;
      }
    },
    {
      title: '操作',
      render: (text, record) => (
        <Fragment>
          <Link onClick={()=>{this.changeRead(record.notice_id)}} to={`/list/detail/${record.log_post_id}`}>详情</Link>
        </Fragment>
      ),
    },
  ];

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'post/fetchNotice',
    });
    
    this.setWindowWide();
    window.addEventListener('resize', this.setWindowWide);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setWindowWide);
    this.setWindowWide.cancel();
  }

  @Bind()
  @Debounce(200)
  setWindowWide() {
    const w = window.innerWidth || document.documentElement.clientWidth;
    this.setState({
      isWide: w > 600,
    });
  }

  changeRead = (noticeId) => {
    const {dispatch} = this.props;
    dispatch({type: 'post/updateNoticeRead', payload: {notice_id: noticeId}});
  }

  handleStandardTableChange = (pagination) => {
    const { dispatch } = this.props;

    const params = {
      p: pagination.current,
    };

    dispatch({
      type: 'post/fetchNotice',
      payload: params,
    });
  };

  handleChangeMobilePage = (current) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'post/fetchNotice',
      payload: {
        p: current,
      },
    });
  }

  render() {
    const {
      noticeData,
      loading,
    } = this.props;
    const {isWide} = this.state;
    return (
      <PageHeaderWrapper title="消息通知">
        <Card bordered={false}>
          <div className={styles.tableList}>
            {isWide ? <StandardTable
              selectedRows={[]}
              loading={loading}
              data={noticeData}
              columns={this.columns}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange}
            /> : 
            <div>
              <List
                itemLayout="vertical"
                pagination={false}
                dataSource={noticeData.list}
                renderItem={item=> (
                  <List.Item
                    key={item.notice_id}
                    actions={[]}
                    extra={<Link onClick={()=>{this.changeRead(item.notice_id)}} to={`/list/detail/${item.log_post_id}`}>详情 <Icon type="right" /></Link>}
                  >
                    <List.Item.Meta
                      title={`${item.log_username} 打开了《${item.post_title}》`}
                      description={moment.unix(item.log_created).format('YYYY-MM-DD HH:mm')}
                      style={{marginBottom: 0}}
                    />
                  </List.Item>
                )}
              />
              <div style={{textAlign: 'right', marginTop: 8}}>
                <Pagination current={noticeData.pagination.current} total={noticeData.pagination.total} onChange={this.handleChangeMobilePage} />
              </div>
            </div>
            }
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
